[#ftl]
[@define "agile.SitemapPane" "ContentPane" "InlineEditBox=dijit/InlineEditBox,Tree=dijit/Tree,Memory=dojo/store/Memory,Observable=dojo/store/Observable,ObjectStoreModel=dijit/tree/ObjectStoreModel,dndSource=dijit/tree/dndSource"]
name:"Sitemap"
,open:false
[#assign buttonControl]<div class='agileButton agileButtonRemove'></div><div class='agileButton agileButtonAdd'></div>[/#assign]
,constructor:function(){
	this.title = agile.i18n(this.name,null,"Page Navigator");	
	aspect.after(this,"startup",lang.hitch(this,"init"));
	aspect.after(this,"postCreate",lang.hitch(this,function(){
		this.buttonControlNode = construct.create("div",{innerHTML:"${buttonControl?js_string}"});
		construct.place(this.buttonControlNode,this.domNode,"last");
	}));
} 
,getTitleNode:function(){
	return this._buttonWidget.domNode;
}

,init:function(){	

	this.getTitleNode().title = agile.i18n("sitemap_help",null,"Create and maintain pages here");
	
	var self = this;
//	console.log("sitemap=",window["ls"]["agile.sitemap"]);
	var sitemapData = json.parse(window["ls"]["agile.sitemap"],false);

	var siteStore = new Memory({
		data:sitemapData
		,getChildren:function(object){
			return this.query({parent:object.id});
		}
	});
	aspect.around(siteStore,"put",function(originalPut){
		return function(obj,options){
			if(options && options.parent){
				obj.parent = options.parent.id;
			}
			return originalPut.call(siteStore,obj,options);
		}
	});
	
	siteStore = new Observable(siteStore);
	
	var model = new ObjectStoreModel({
		store:siteStore
		,query:{id:"home"}
		,labelAttr:"title"
	});
	
	// monitor changes to items
	this.own(		
		aspect.after(model,"onChange", lang.hitch(this, function(nothing,items){
			window["ls"]["agile.sitemap"] = json.stringify(siteStore.data);			
		}))				
	);
	
	var tree = new Tree({model:model,dndController:dndSource,autoExpand:true
		,getTooltip:function(item){
			return agile.i18n("msg_sitemap_007",null,"Double click to navigate to the screen");
		}
		,onDblClick:function(item,node,evt){
			item.open = true;
			siteStore.put(item);
			topic.publish("agile.sitemap.changed","open",item);
		}
		,onClick:function(item,node,evt){
			//initialize the inline editor for title and notify changes
			if(!node.editWidget){
				var editWidget = node.editWidget = new InlineEditBox({value:node.label,width:"120px"},node.labelNode);
				editWidget.startup();
				editWidget.watch("value",function(name,old,value){
					item.title = value;
					node.label = value;
					siteStore.put(item);
					
					topic.publish("agile.sitemap.changed","update",item);
				});
			}
		}
	});
	tree.placeAt(this.domNode,"last");
	tree.startup();
	
	query(".agileButtonRemove",this.domNode).forEach(function(node){
		node.title = agile.i18n("msg_sitemap_006",null,"Click to remove a screen");
	});
	query(".agileButtonAdd",this.domNode).forEach(function(node){
		node.title = agile.i18n("msg_sitemap_005",null,"Click to add a new screen");
	});
	
	query(".agileButtonRemove",this.domNode).on("click",function(){
		var item = tree.get("selectedItems")[0];
		if(!item){
			topic.publish("agile.message.info",agile.i18n("msg_sitemap_001"));			
			return;
		}
		if(item.id == "home"){
			topic.publish("agile.message.info",agile.i18n("msg_sitemap_002"));
			return;
		}
				
		topic.publish("agile.message.confirm",agile.i18n("msg_remove_confirm"),null,this,{ok:function(){
			siteStore.remove(item.id);
			topic.publish("agile.sitemap.changed","remove",item);
			
			siteStore.query({parent:item.id}).forEach(function(child){
				child.parent = item.parent; 
				siteStore.put(child);//trigger tree refresh
			});
			
		},cancel:function(){}});
				
	});
	query(".agileButtonAdd",this.domNode).on("click",function(){
		var item = tree.get("selectedItems")[0];
		if(!item){
			topic.publish("agile.message.info",agile.i18n("msg_sitemap_003"));
			return;
		}
		
		var title = "New page";//prompt(agile.i18n("msg_sitemap_004"));
		if(title){
			var child = {title:title,id:self.createId(),store:self.createId()};
			
			siteStore.put(child,{overwrite:true,parent:item});
			topic.publish("agile.sitemap.changed","add",child);
			
		}		
	});	
	
	//listen on changes to page attributes e.g. title
	this.subscribe("agile.page.changed",function(page){		
		var item = siteStore.query({id:page.id})[0];
		//console.log("page:",page,",item=",item);
		if(item){
			siteStore.put(lang.mixin(item,page));
		}
	});
}

,createId:function(){
	return "s"+(new Date().getTime())  + "1234567890".substring(Math.floor(Math.random()*10));
}
[/@]